<template>
    <page title="订单详情" ref="pageRef" nav-color="transparent">
        <view v-if="data" class="wrapper marginT12 marginX16 padding16 bgcolor-white radius12">
            <view class="flex-align paddingY16">
                <view class="bold">订单详情</view>
                <view v-if="data.type == 2" class="presell">预售订单</view>
            </view>
            <view class="top flex-align flex1">
                <image :src="data.itemList[0].cover" mode="scaleToFill" class="img radius8" />
                <view class="self-stretch flex-column-between marginL12 flex1">
                    <view class="color-1 font4">{{ data.itemList[0].name }}</view>
                    <view class="flex-align-between">
                        <view class="color-theme">
                            <text class="font2">¥</text>
                            <text class="font8 bold">{{ data.itemList[0].price }}</text>
                        </view>
                        <view class="color-1 font2">x{{ data.itemList[0].quantity }}</view>
                    </view>
                </view>
            </view>
            <view class="flex-align-between font2">
                <view>商品金额</view>
                <view>¥{{ data.totalAmount }}</view>
            </view>
            <view class="flex-align-between font2 paddingT12">
                <view>快递费</view>
                <view>¥{{ data.expressAmount }}</view>
            </view>
            <view class="flex-align-between font2 paddingT12">
                <view>优惠券</view>
                <view>-¥{{ data.couponAmount }}</view>
            </view>
            <view
                v-if="data.status === 0 && data.type == 2 && data.paidAmount > 0"
                class="paddingT25 flex-align-end"
            >
                <view class="font2 color-3">共{{ data.itemList[0].quantity }}件</view>
                <view class="flex-align paddingL12">
                    <view class="color-3 font1 flex-align">
                        <view>总价：</view>
                        <view class="">
                            <text class="font1">¥</text>
                            <text class="font6 bold">{{ data.totalAmount }}</text>
                        </view>
                    </view>
                    <view class="color-theme font1 flex-align paddingL12">
                        <view>需付款：</view>
                        <view class="">
                            <text class="font1">¥</text>
                            <text class="font6 bold">
                                {{ data.paymentAmount - data.paidAmount }}
                            </text>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else-if="data.status === 0" class="paddingT25 flex-align-end">
                <view class="font2 color-3">共{{ data.itemList[0].quantity }}件</view>
                <view class="color-1 paddingL9">小计：</view>
                <view class="color-theme font8 paddingL4">
                    <text class="font4">￥</text>
                    {{ data.paymentAmount }}
                </view>
            </view>
            <view v-else class="paddingT25 flex-align-end">
                <view class="font2 color-3">共{{ data.itemList[0].quantity }}件</view>
                <view class="font2 color-1 paddingL9">实付款：</view>
                <view class="color-1 font8 paddingL4">
                    <text class="font4">￥</text>
                    {{ data.paidAmount }}
                </view>
            </view>
        </view>
        <view v-if="data" class="marginT12 marginX16 padding16 bgcolor-white radius12">
            <view class="flex-align-between">
                <view class="font2 flex-shrink0">订单号</view>
                <view class="font2 flex1 text-right line-ellipsis marginL10">
                    {{ data.tradeNo }}
                </view>
                <button class="btn-clear copy marginL5 flex-shrink0" @click="copy(data.tradeNo)">
                    复制
                </button>
            </view>
            <view class="flex-align-between paddingT20">
                <view class="font2 flex-shrink0">下单时间</view>
                <view class="font2">{{ data.createTime }}</view>
            </view>
            <view class="flex-align-between paddingT20" v-if="data.paymentTime">
                <view class="font2 flex-shrink0">付款时间</view>
                <view class="font2">{{ data.paymentTime }}</view>
            </view>
            <view class="flex-align-between paddingT20">
                <view class="font2 flex-shrink0">收货地址</view>
                <view class="font2 text-right marginL16">
                    {{ data.contactName }}，{{ data.contactNo }}，{{ data.province }}{{ data.city
                    }}{{ data.district }}{{ data.address }}
                </view>
            </view>
        </view>
        <view
            v-if="data && data.type === 2"
            class="flex-align-between marginT12 marginX16 padding16 bgcolor-white radius12"
        >
            <view class="font2 flex-shrink0">尾款提醒手机号</view>
            <view class="font2 text-right marginL10">
                {{ data.restNotifyMobile }}
            </view>
        </view>
        <view class="fill"></view>
        <view v-if="data" class="bottom-fixed bgcolor-white">
            <view
                v-if="[0, 1].includes(data.status)"
                :class="data.status === 1 ? 'paddingB25' : null"
                class="paddingX16 paddingT13 flex-align-end"
            >
                <button
                    :class="data.status === 1 ? 'btn-size' : 'btn'"
                    class="cm-plain-btn"
                    style="margin-right: 20rpx !important"
                    @click.stop="showAddress"
                >
                    修改地址
                </button>
                <button
                    v-if="data.type === 2 && data.status === 0"
                    :class="data.status === 1 ? 'btn-size' : 'btn'"
                    class="cm-plain-btn"
                    @click.stop="showModal = true"
                >
                    修改尾款手机号
                </button>
            </view>
            <view v-if="data.status === 0" class="paddingX16 paddingT13 paddingB25 flex-align-end">
                <view class="flex-align">
                    <view
                        v-if="data.type === 1 || (data.type === 2 && data.restFlag === 1)"
                        class="color-1"
                    >
                        合计：
                    </view>
                    <view v-if="data.type === 2 && !data.restFlag" class="color-1">需付定金：</view>
                    <view
                        v-if="data.type === 1 || (data.type === 2 && data.restFlag === 1)"
                        class="color-theme font8 paddingL4 paddingR16"
                    >
                        <text class="font4">￥</text>
                        {{ data.paymentAmount - data.paidAmount }}
                    </view>
                    <text
                        v-if="data.type === 2 && !data.restFlag"
                        class="color-theme font8 paddingL4 paddingR16"
                    >
                        ￥{{ data.depositAmount }}
                    </text>
                </view>
                <button class="cm-btn btn-size" @click.stop="realPay">确认并支付</button>
            </view>
            <view
                v-if="[2, 99].includes(data.status)"
                class="paddingX16 paddingT13 paddingB25 flex-align-end"
            >
                <button class="cm-plain-btn btn-size" @click="showExpress">查看物流</button>
                <view v-if="data.status === 2" class="paddingL16 flex-shrink0">
                    <button class="cm-plain-btn btn-size" @click.stop="receive">确认收货</button>
                </view>
            </view>
        </view>
        <view v-if="showModal" class="modal">
            <view class="phone-modal flex-column-align-center">
                <view class="title">修改尾款提醒手机号</view>
                <view class="content flex-align">
                    <text class="">手机号：</text>
                    <input
                        class="phone"
                        style="width: 400rpx"
                        v-model.trim="phoneNum"
                        type="number"
                        placeholder-style="color: #ccc"
                    />
                </view>
                <view class="flex-align footer">
                    <button class="btn" @click.stop="showModal = false">取消</button>
                    <button class="btn marginL10" @click.stop="showPhone">确定</button>
                </view>
            </view>
        </view>
    </page>
</template>
<script>
    import resource from '@/utils/resource'
    import { baseEncode } from '../../utils/utils'
    export default {
        data() {
            return {
                resource,
                data: null,
                tradeNo: '',
                showModal: false,
                phoneNum: ''
            }
        },
        computed:{

          payInfo() {
                return this.$store.state.payInfo
            }
        },
        watch: {
            payInfo(val) {
                if (val && val.payResult == 'SUCCESS') {
                    this.paySuccess(val)
                } else if (val && val.payResult !== 'SUCCESS') {
                }
            }
        },
        onLoad(options) {
            this.tradeNo = options.tradeNo
        },
        mounted() {
            setTimeout(() => {
                this.getData(true)
            }, 100)
        },
        onPullDownRefresh() {
            this.getData(false)
        },
        onShow() {
            this.getData(true)
        },
        methods: {
            async getData(loading = false) {
                const res = await this.$service.mall.orderDetail(this.tradeNo, loading)
                uni.stopPullDownRefresh()
                if (res && res.itemList[0].spu) {
                    let obj = res.itemList[0].spu
                    if (obj.parameter) {
                        res.itemList[0].parameterStr = JSON.parse(obj.parameter)
                            .map((item) => item.value)
                            .join('/')
                    }
                }
                this.data = res
            },
            copy(text) {
                this.$common.copy(text)
            },
            showAddress() {
                this.$router.push('address', { type: 0, tradeNo: this.tradeNo })
            },
            async showPhone() {
                if (this.phoneNum) {
                    await this.$service.mall
                        .updatePhone({
                            restNotifyMobile: this.phoneNum,
                            tradeNo: this.data.tradeNo
                        })
                        .then((res) => {
                            if (res.code === '0') {
                                this.$message.success('修改成功!')
                                this.showModal = false
                                this.getData(true)
                            }
                        })
                } else {
                    this.$message.warn('尾款提醒手机号不能为空！')
                }
            },
            showExpress() {
                this.$router.push('packages', { type: 1, tradeNo: this.data.deliveryTradeNo })
            },
            async realPay() {
                const res = await this.$service.mall.orderPay(this.tradeNo, 'WXPAY_JSAPI')
                if (res) {
                    if (res.paySuccess) {
                        this.getData(true)
                        if (this.$store.state.hide == 1) {
                            this.$service.user.getHide()
                        }
                        return
                    }
                    if(res.redirectUrl){
                      this.thirdPay(res)
                    }else{
                      this.wechatPay(res)
                    }
                    return
                }
            },
            wechatPay(data) {
                let payInfo = data.payInfo
                wx.requestPayment({
                    timeStamp: payInfo.timeStamp,
                    nonceStr: payInfo.nonceStr,
                    package: payInfo.packageValue,
                    signType: payInfo.signType,
                    paySign: payInfo.paySign,
                    success: (res) => {
                        this.close()
                        if (this.$store.state.hide == 1) {
                            this.$service.user.getHide()
                        }
                        this.$router.push('order_product')
                    },
                    fail: (res) => {}
                })
            },
            thirdPay(data) {
                let self = this
                let redirectUrl = data.redirectUrl
                let requestId = data.requestId
                const base64Url = encodeURIComponent(baseEncode(redirectUrl))
                wx.openEmbeddedMiniProgram({
                    path: 'pages/pay/order', // 启动目标页面
                    appId: 'wx0448557563ffc600', // 启动的小程序
                    envVersion: 'release', // develop | trial | release
                    verify: 'binding',
                    extraData: {
                        title: '订单付款', // 导航Title
                        tip: `待支付订单付款`, // 支付提示内容
                        requestId: requestId, // 本次请求ID
                        action: 'epPay', // 支付模式
                        payUrl: base64Url // 支付地址, 需要进行Base64转换
                    },
                    success: (res) => {
                        console.info('启动成功', res)
                    },
                    fail: (err) => {
                        console.info('启动失败', err)
                    }
                })
            },
            paySuccess(payInfo) {
                this.close()
                this.$store.state.payInfo = null
                if (this.$store.state.hide == 1) {
                    this.$service.user.getHide()
                }
                this.$router.push('order_product')
            },
            receive() {
                this.$message.confirm('确认收货吗?', async () => {
                    const res = await this.$service.mall.receive(this.tradeNo)
                    res && this.getData(true)
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .wrapper {
      padding: 0 20rpx !important;
        .presell {
            height: 44rpx;
            line-height: 44rpx;
            border-radius: 22rpx;
            font-size: 24rpx;
            color: #fff;
            padding: 0 16rpx;
            background: $color-theme;
            margin-left: 16rpx;
        }
        .top {
            padding: 0 0 40rpx;
            .img {
                width: 136rpx;
                height: 136rpx;
            }
        }
    }
    .copy {
        padding: 0 6rpx;
        line-height: 32rpx;
        border-radius: 8rpx;
        text-align: center;
        color: #000;
        font-size: 24rpx;
        background: #fec433;
    }
    .fill {
        height: 172rpx;
    }
    .btn-size {
        width: 288rpx;
        height: 64rpx;
        border-radius: 44rpx;
        font-size: 28rpx;
    }
    .btn {
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        padding: 0 20rpx;
        color: #fff;
        font-size: 28rpx;
        background: linear-gradient(90deg, #2affff 0%, #4d70f2 100%);
        border-radius: 24rpx;
    }
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        .phone-modal {
            position: relative;
            width: 600rpx;
            height: 400rpx;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            .title {
                width: 350rpx;
                position: absolute;
                top: 30rpx;
                left: 50%;
                transform: translateX(-50%);
                font-size: 40rpx;
                font-weight: 500;
            }
            .content {
                .phone {
                    color: #000;
                    height: 78rpx;
                    background: rgb(241, 239, 239);
                    border-radius: 16rpx;
                    margin: 0 auto;
                }
            }
            .footer {
                position: absolute;
                bottom: 40rpx;
                right: 40rpx;
            }
        }
    }
</style>
